<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%  String point=(String) request.getSession().getAttribute("coordinatePoint");%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>巡检定位</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=0.3, user-scalable=0, minimum-scale=0, maximum-scale=5.0,user-scalable=yes">
    <link rel="stylesheet" type="text/css" href="/css/street/street.css"/>
    <link rel="stylesheet" href="/css/officialDocument/officialDocument.css">
    <style>
        .formUl li label {
            float: left;
            width: 150px;
            vertical-align: middle;
            height: 34px;
            line-height: 34px;
            text-align: right;
            font-size: 14px;
        }
        .formUl li input[type=text]{
            border:1px solid #ddd;
        }
        .dian{
            display: inline-block;
            width:10px;
            height:10px;
            background: red;
            border-radius: 50%;
        }
        .red{
            width:30px;
            height:30px;
            border-radius: 50%;
            background: red;
        }
    </style>
    <script src="/js/jquery/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/jquery/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/layer/layer.js?20201106" type="text/javascript" charset="utf-8"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/layDate-v5.0.9/laydate/laydate.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=YECw4heQ9wzy7RKg8OW9QLMsySKzQRan"></script>
</head>
<body >
<div class="header headTop">
    <ul class="clearfix fl">
        <li class="headTopLi fl Querys active" data-type="0">我的巡检轨迹</li>
        <li class=" fl"><img style="margin-top: 3px;" src="/img/02.png" alt=""></li>
        <li class="headTopLi fl Querys" data-type="1">他人巡检轨迹</li>
    </ul>
</div>


<div class="mainBg" style="padding-top: 45px;
    background: #fff;">
    <div class="mainLeft fl" style="display: block;width: 100%; background: #fff;height: 45px;">
        <label class="fl" style="margin-top: 8px;margin-left: 46px;">
            <span class="fl" style="margin-top: 8px;">时间：</span>
            <label class="fl"><input name="printDate" readonly="readonly"
                                     placeholder="请输入日期"
                                    id="time"
                                     type="text"></label>

        </label>
        <button style="margin-top: 11px;" type="button" class="Query fl Querysl">查询</button>
        <div style="display: none">
            <label class="fl" style="margin-top: 8px;margin-left: 46px;">
                <span class="fl" style="margin-top: 8px;">人员：</span>
                <input type="text" readonly="readonly" id="roleName">
                <a href="javascript:void (0)" class="roleName" style="color: #00a0e9">选择</a>
            </label>
            <label class="fl" style="margin-top: 8px;margin-left: 46px;">
                <span class="fl" style="margin-top: 8px;">时间：</span>
                <label class="fl"><input name="printDateshijian" readonly="readonly"
                                         placeholder="请输入日期"
                                         id="time2"
                                         type="text"></label>

            </label>
            <button style="margin-top: 11px;" type="button" class="Query fl Querytwo">查询</button>
        </div>
    </div>
    <div class="mainRight" id="allmap" style="height: 600px;width: 100%;">

    </div>

    <%--<button onclick = "scopeOfTheCommunity.polygon.enableEditing();">开启线、面编辑功能</button>--%>
    <%--<button onclick = "scopeOfTheCommunity.polygon.disableEditing();">关闭线、面编辑功能</button>--%>
    <%--<button onclick = "scopeOfTheCommunity.inits();">坐标显示</button>--%>
</div>

<script type="text/javascript">
    function getLocalTime(nS) {
        return new Date(parseInt(nS) * 1000).toLocaleString().substr(0,17)
    }
    var user_id='';
    $('.mainRight').height($(document).height()-$('.header').height()-$('.mainLeft').height())
    var maps={
        map:null,
        point:null,
        init:function (fn) {
            this.map = new BMap.Map("allmap",{mapType:BMAP_HYBRID_MAP});    // 创建Map实例
            this.point = new BMap.Point(<%=point%>);//设置坐标
            this.map.centerAndZoom(this.point, 14);//创建比例
            this.map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
            this.map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
            this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
           // gridMembermap(null,$('[name="printDate"]').val()+' 00:00:00',$('[name="printDate"]').val()+' 23:59:59')
            gridMembermap(undefined,$.cookie('uid'))
            if(fn!=undefined){
                fn()
            }
        }
    }






    var theRockGardenMap={//网格员位置方法展示地图方法
        data:[],
        init:function (latitudeAndLongitude,fn) {
            this.data=latitudeAndLongitude;
            var dataArr=this.data;

            for(var i=0;i<dataArr.length;i++){

                var points=new BMap.Point(parseFloat(dataArr[i].lantitude),parseFloat(dataArr[i].longitude))//对象实例化
                var marker;

                if(i==0){
                    var myIcon = new BMap.Icon("/img/grid/qiandaohongqi.png",
                        new BMap.Size(34,34));
                    marker = new BMap.Marker(points,{icon:myIcon});

                }else if(i==(dataArr.length-1)){
                    var myIcon = new BMap.Icon("/img/grid/zhongzhi.png",
                        new BMap.Size(34,34));
                    marker = new BMap.Marker(points,{icon:myIcon});
                }else {
                    marker = new BMap.Marker(points);//创建标注
                }
                var label;
                maps.map.addOverlay(marker);// 将标注添加到地图中
                marker.addEventListener("onmouseover", function(i,markers,labels){
                    return function () {
                        labels = new BMap.Label(dataArr[i].userName+'&nbsp;&nbsp;&nbsp;&nbsp;' +
                            ''+getLocalTime(dataArr[i].updateTime)+'<br/>'+dataArr[i].location
                            ,{offset:new BMap.Size(-20,-30)});
                        labels.setStyle({
                            backgroundColor :"0.7",
                            border :"1px solid red",
                            borderRadius:'6px',
                            fontWeight :"bold",
                            background:'#fff',
                            padding:'3px 6px'
                        })
                        markers.setLabel(labels);
                    }
                }(i,marker,label),false);
                marker.addEventListener("onmouseout", function(marker){
                    return function () {
                        $(marker.Yc.nextElementSibling).remove()
                        console.log(marker)
                    }

                }(marker),false);







            }
            if(typeof fn=='function'){
                fn();
            }

        }
    }







    var scopeOfTheCommunity={
        polygon:null,
        polyline:null,
        init:function (dataArr,num,ids,type,strData) {//范围显示
            var colors='blue';
            if(num==1){
                colors='#3A4F0B';
            }
            this.polygon=new BMap.Polygon(dataArr, {strokeColor:colors, strokeWeight:2, strokeOpacity:1, fillOpacity: 0.05});  //创建多边形
//                var strIng=strData;
            maps.map.addOverlay(this.polygon);   //增加多边形


        },
        lineinits:function (dataArr) {//人员连线
            this.polyline = new BMap.Polyline(dataArr, {strokeColor:"red", strokeWeight:2, strokeOpacity:1});   //创建折线
            maps.map.addOverlay(this.polyline);   //增加折线
        }
    }





















//    function gridMembermap(userId,startTime,endTime) {
//
//        maps.map.clearOverlays();
//        $.get('/footprint/getFootPrint',{
//            page:1,pageSize:10,exportId:1,
//            newsTime:startTime,
//            lastEditTime:endTime,
//            userId:userId
//        },function (json) {
//            if(json.flag){
//                stoneGarden();
//                var objarr=json.datas;
//                theRockGardenMap.init(json.datas,function () {
//                    var arr=[];
//                    for(var i=0;i<objarr.length;i++){
//                        var lng = objarr[i].gridLocation.split(',')[0]
//                        var lat = objarr[i].gridLocation.split(',')[1]
//                        arr.push(new BMap.Point(parseFloat(lng),parseFloat(lat)))
//                        //                        point,img,name,id,con,grid,type,title
//                        var point = new BMap.Point(parseFloat(lng),parseFloat(lat))
////                        console.log(point)
//
////                        var myIcon = new BMap.Icon("/img/grid/zhongzhi.png",
////                            new BMap.Size(34,34));
//                      var myIcon="";
//                        if(i==0){
//                            var myIcon = new BMap.Icon("/img/grid/qiandaohongqi.png",
//                                new BMap.Size(34,34));
//                            var marker = new BMap.Marker(point,{icon:myIcon, title:'姓名：'+objarr[i].userName+'   时间：'+objarr[i].checkTime});
//
//                        }else if(i==(objarr.length-1)){
//                            var myIcon = new BMap.Icon("/img/grid/zhongzhi.png",
//                                new BMap.Size(34,34));
//                            var marker = new BMap.Marker(point,{icon:myIcon, title:'姓名：'+objarr[i].userName+'   时间：'+objarr[i].checkTime});
//                        }else {
//                            var marker = new BMap.Marker(point,{ title:'姓名：'+objarr[i].userName+'   时间：'+objarr[i].checkTime});//创建标注
//                        }
////                        var marker = new BMap.Marker(point,{
////                            title:'姓名：'+objarr[i].userName+'   时间：'+objarr[i].checkTime,
////                            icon:myIcon
////                        });
////                        marker.customData = { name: objarr[i].userName,time:objarr[i].checkTime,area:objarr[i].location };
//                        maps.map.addOverlay(marker);
//                    }
//
//
//                    scopeOfTheCommunity.lineinits(arr)
//                })
//            }
//        },'json')
//    }
    function gridMembermap(time,numid) {

        maps.map.clearOverlays();
        $.get('/footprint/getFootPrint',{
            uid:numid,
            app:1,
            date:time
        },function (json) {
            if(json.flag){
                stoneGarden();
                var objarr=json.obj;
                theRockGardenMap.init(json.obj,function () {
                    var arr=[];
                    for(var i=0;i<objarr.length;i++){
                        arr.push(new BMap.Point(parseFloat(objarr[i].lng),parseFloat(objarr[i].lat)))
                      //  arr.push(new BMap.Point(parseFloat(objarr[i].lat),parseFloat(objarr[i].lng)))
                        //                        point,img,name,id,con,grid,type,title
                        var point = new BMap.Point(parseFloat(objarr[i].lng),parseFloat(objarr[i].lat))
                       // var point = new BMap.Point(parseFloat(objarr[i].lat),parseFloat(objarr[i].lng))
//                        console.log(point)
//                        var myIcon = new BMap.Icon("/img/grid/zhongzhi.png",
//////                            new BMap.Size(34,34));
                      var myIcon="";
                        if(i==0){
                            var myIcon = new BMap.Icon("/img/grid/zhongzhi.png",
                                new BMap.Size(34,34));
                            var marker = new BMap.Marker(point,{icon:myIcon, title:'姓名：'+objarr[i].users.userName+'   时间：'+objarr[i].createTimeStr +'  位置：'+objarr[i].location});

                        }else if(i==(objarr.length-1)){
                            var myIcon = new BMap.Icon("/img/grid/qiandaohongqi.png",
                                new BMap.Size(34,34));
                            var marker = new BMap.Marker(point,{icon:myIcon, title:'姓名：'+objarr[i].users.userName+'   时间：'+objarr[i].createTimeStr +'  位置：'+objarr[i].location});
                        }else {
                            var marker = new BMap.Marker(point,{ title:'姓名：'+objarr[i].users.userName+'   时间：'+objarr[i].createTimeStr+'  位置：'+objarr[i].location});//创建标注
                        }
//                        var marker = new BMap.Marker(point,{
//                            title:'姓名：'+objarr[i].userName+'   时间：'+objarr[i].checkTime,
//                            icon:myIcon
//                        });
//                        marker.customData = { name: objarr[i].userName,time:objarr[i].checkTime,area:objarr[i].location };
                        maps.map.addOverlay(marker);
                    }


                    scopeOfTheCommunity.lineinits(arr)
                })
            }
        },'json')
    }


    function stoneGarden() {
        scopeOfTheCommunity.init([//初始化石园街道
            $.get('/gridInfo/selectByPrimaryKey',{gridInfo:1},function (json) {
                if(json.flag){
                   var jsonArr=json.data;

                        var chistr=jsonArr.mapInfo;
                        if(chistr.indexOf('&')==-1) {
                            var chiArr = jsonArr.mapInfo.split('|');
                            var newArr = [];
                            for (var m = 0; m < chiArr.length; m++) {
                                newArr.push(new BMap.Point(parseFloat(chiArr[m].split(',')[0]), parseFloat(chiArr[m].split(',')[1])))
                            }
                            scopeOfTheCommunity.init(newArr, 2)

                        }else if(chistr.indexOf('&')!=-1){
                            var chiArr = jsonArr.mapInfo.split('&');

                            for(var m=0;m<chiArr.length;m++){
                                var chiTwoArr=chiArr[m].split('|');
                                var newArrTwo= [];
                                for(var k=0;k<chiTwoArr.length;k++){
                                    newArrTwo.push(new BMap.Point(parseFloat(chiTwoArr[k].split(',')[0]), parseFloat(chiTwoArr[k].split(',')[1])))
                                }
                                scopeOfTheCommunity.init(newArrTwo, 2)

                            }
                        }
                    }

            },'json')

     /*       new BMap.Point(118.001231,34.391279),
            new BMap.Point(118.034576,34.379303),
            new BMap.Point(118.038097,34.375371),
            new BMap.Point(118.032348,34.376145),
            new BMap.Point(118.032492,34.372034),
            new BMap.Point(118.038097,34.371914),
            new BMap.Point(118.032061,34.364942),
            new BMap.Point(118.046218,34.365836),
            new BMap.Point(118.050314,34.355704),
            new BMap.Point(118.024084,34.346644),
            new BMap.Point(118.023509,34.340563),
            new BMap.Point(118.02164,34.340176),
            new BMap.Point(118.027893,34.322767),
            new BMap.Point(117.986427,34.320858),
            new BMap.Point(117.98578,34.326523),
            new BMap.Point(117.965011,34.323721),
            new BMap.Point(117.980678,34.352038),
            new BMap.Point(117.986858,34.350369)
*/

        ])
    }





    $('[name="printDate"]').val(new Date().Format("yyyy-MM-dd"))
    $('[name="printDateshijian"]').val(new Date().Format("yyyy-MM-dd"))





    maps.init(function () {

    })//地图初始化





$('.Querysl').click(function () {
    //gridMembermap(null,$('[name="printDate"]').val()+' 00:00:00',$('[name="printDate"]').val()+' 23:59:59')
   // gridMembermap($('[name="printDate"]').val(),$.cookie('uid'))
    selectByfoot($('[name="printDate"]').val(),$.cookie('uid'));
})


    $('.Querytwo').click(function () {
        var  dataids=null;
        if($('#roleName').attr('dataid')!=undefined){
            dataids=$('#roleName').attr('dataid').replace(',','')
        }

       // gridMembermap(dataids,$('[name="printDateshijian"]').val()+' 00:00:00',$('[name="printDateshijian"]').val()+' 23:59:59')
       // gridMembermap($('[name="printDateshijian"]').val(),dataids)
        selectByfoot($('[name="printDateshijian"]').val(),dataids);
    })
    
    $('.headTop ul li').click(function () {
        $(this).siblings('li').removeClass('active');
        $(this).addClass('active');
        if($(this).attr('data-type')==0){
            $('.mainLeft>label').show()
            $('.mainLeft>div').hide()
           // gridMembermap($.cookie('uid'),$('[name="printDate"]').val()+' 00:00:00',$('[name="printDate"]').val()+' 23:59:59')
            gridMembermap($('[name="printDate"]').val(),$.cookie('uid'))
        }else if($(this).attr('data-type')==1){
            $('.mainLeft>label').hide()
            $('.mainLeft>div').show()
            var  dataids=null;
            if($('#roleName').attr('dataid')!=undefined){
                dataids=$('#roleName').attr('dataid').replace(',','')
            }
            //gridMembermap(dataids,$('[name="printDateshijian"]').val()+' 00:00:00',$('[name="printDateshijian"]').val()+' 23:59:59')
            gridMembermap($('[name="printDateshijian"]').val(),dataids)
        }

    })


    $('.roleName').click(function () {
        user_id='roleName';
        $.popWindow('/common/selectUser?0')
    })

    function selectByfoot(time,numid){

            maps.map.clearOverlays();
            $.get('/footprint/findByCondition',{
                uid:numid,
                app:1,
                condition:time
            },function (json) {
                if(json.flag){
                    stoneGarden();
                    var objarr=json.obj;
                    theRockGardenMap.init(json.obj,function () {
                        var arr=[];
                        for(var i=0;i<objarr.length;i++){
                            arr.push(new BMap.Point(parseFloat(objarr[i].lng),parseFloat(objarr[i].lat)))
                            //  arr.push(new BMap.Point(parseFloat(objarr[i].lat),parseFloat(objarr[i].lng)))
                            //                        point,img,name,id,con,grid,type,title
                            var point = new BMap.Point(parseFloat(objarr[i].lng),parseFloat(objarr[i].lat))
                            // var point = new BMap.Point(parseFloat(objarr[i].lat),parseFloat(objarr[i].lng))
//                        console.log(point)
//                        var myIcon = new BMap.Icon("/img/grid/zhongzhi.png",
//////                            new BMap.Size(34,34));
                            var myIcon="";
                            if(i==0){
                                var myIcon = new BMap.Icon("/img/grid/zhongzhi.png",
                                    new BMap.Size(34,34));
                                var marker = new BMap.Marker(point,{icon:myIcon, title:'姓名：'+objarr[i].users.userName+'   时间：'+objarr[i].createTimeStr+'  位置：'+objarr[i].location});

                            }else if(i==(objarr.length-1)){
                                var myIcon = new BMap.Icon("/img/grid/qiandaohongqi.png",
                                    new BMap.Size(34,34));
                                var marker = new BMap.Marker(point,{icon:myIcon, title:'姓名：'+objarr[i].users.userName+'   时间：'+objarr[i].createTimeStr+'  位置：'+objarr[i].location});
                            }else {
                                var marker = new BMap.Marker(point,{ title:'姓名：'+objarr[i].users.userName+'   时间：'+objarr[i].createTimeStr+'  位置：'+objarr[i].location});//创建标注
                            }
//                        var marker = new BMap.Marker(point,{
//                            title:'姓名：'+objarr[i].userName+'   时间：'+objarr[i].checkTime,
//                            icon:myIcon
//                        });
//                        marker.customData = { name: objarr[i].userName,time:objarr[i].checkTime,area:objarr[i].location };
                            maps.map.addOverlay(marker);
                        }


                        scopeOfTheCommunity.lineinits(arr)
                    })
                }
            },'json')

    }

    laydate.render({
        elem: '#time'
    });
    laydate.render({
        elem: '#time2'
    });


    var time = {
        elem:'#time',
        format:'YYYY-MM-DD',
        min:'1970-01-01',
        max:'2999-12-31',
        istime:true,//是否显示时分秒
        istoday:true,//是否显示【今天】的按钮
        isclear:true,//是否显示【清空】的按钮
        festival: true,//是否显示节日
        start: laydate.now(0,"YYYY-MM-DD"),  // 开始日期
        fixed: false,   // 是否固定在可视区域
        zIndex: 10000,  // css控制图层的遮罩效果（效果不明显）
        ready: function(dates){  // 选择好日期的回调
            console.log(dates)
        }
    }
    laydate(time);
    $('#time').val(laydate.now(0, 'YYYY-MM-DD'));






</script>
</body>
</html>